<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>设置定时器的进度条</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
	.loading{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		background-color: #fff;
	}
	.loading .pic{
		width: 124px;
		height: 124px;
		background: url(load.gif);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
</style>
<script src="../jquery-2.1.1.min.js"></script>
<script>
	$(function(){
		var loading = '<div class="loading"><div class="pic"></div></div>';
		$("body").append(loading);
		setInterval(function(){
			$(".loading").fadeOut();
		}, 3000)
	})
</script>
</head>

<body>
	
    <img src="http://a.hiphotos.baidu.com/zhidao/pic/item/cdbf6c81800a19d85c547b1431fa828ba61e4648.jpg" alt="heizi2">
    <img src="http://pic1.win4000.com/wallpaper/4/56208ea9649d4.jpg" alt="heizi">
	<img src="http://img3.imgtn.bdimg.com/it/u=527785605,3778616176&fm=27&gp=0.jpg" alt="heizi3">
    <img src="http://img.bimg.126.net/photo/5Dx3IEUVive4MRE-rQhSzw==/5759259498477486636.jpg" alt="zhende">
    <img src="http://g.hiphotos.baidu.com/zhidao/pic/item/279759ee3d6d55fb64601a166b224f4a20a4dd58.jpg" alt="guiltyCrown">
</body>
</html>